<!--
	상품리스트 페이지
	작성자:문연지
	작성일:2014/10/10
 -->

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="/Jangdolbaeng2/css/customer/common.css" rel="stylesheet">
<style type="text/css">
	a{text-decoration: none; color:black;}
	#head{height:242px;}
	#content{width:1100px; margin:242 0 150 0; margin: 0 auto;}
	#footer{height:150px;}
	
	
	/* MD 추천 부분 */
	#MD_line{
		margin-top:20px;
		margin-bottom:20px;
		border-top: 2px solid #bfbfbf;
		border-bottom: 2px solid #bfbfbf; 
		padding: 5px;
		font-family: nanumBB;
		font-size: 17px;
		font-style: italic;
		text-align: center;
	}
	#MD{
		width:1100px;
		height:270px;
	}
	#MD_underline{
		margin-bottom:30px;
		border-bottom:2px solid #bfbfbf;
		padding: 5px;
	}
	#MD_product_div{
		width:230px; 
		height:230px;
		padding-top:15px; 
		padding-right:20px;
	}
	.product_md{
		/* width:230px; */ 
		height:230px; 
		padding-top:15px; 
		padding-bottom:15px;
		padding-left:25px;
		padding-right:20px;
		float:left;
	}
	/**/
	
	/* 정렬 select*/
	#sortchoose{
		width:1050px;
		padding-bottom:20px;
		text-align: right;
		font-size: 10.5pt;
	}
	.select{
		font-family:nanum;
	}
	/**/
	
	/* 상품 리스트 부분*/
	#productdiv{
		width:1100px;
		height:270px;
		margin-bottom:30px;
	}
	.product{
		/* width:230px;  */
		/* height:230px; */ 
		padding-top:15px; 
		padding-bottom:15px;
		padding-left:25px;
		padding-right:20px;
		float:left;
	}
	.input_text{
		text-align: right;
		line-height: normal;
	}
	
</style>
<script type="text/javascript" src="/Jangdolbaeng2/js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	//카테고리
	var category = '${category}';
	
	selectAllProductCategory(category);
	
	/*정렬*/
	$('#select').on('change',function(){
		if($('#select').val()=='신상품순'){
			selectAllProductCategory(category);
		}else if($('#select').val()=='판매량순'){
			selectAllProductQuantity(category);
		}else if($('#select').val()=='낮은가격순'){
			selectAllProductLowPrice(category);
		}else if($('#select').val()=='높은가격순'){
			selectAllProductHighPrice(category);
		}
	}); 
	
});

//신상순
function selectAllProductCategory(category){
	
	$.ajax({
		url:"/Jangdolbaeng2/product/selectAllProductCategory.action",
		type:"post",
		dataType:'json',
		data:{category:category},
		success:writeList
	});
}
//판매량순
function selectAllProductQuantity(category){
	$.ajax({
		url:"/Jangdolbaeng2/product/selectAllProductQuantity.action",
		type:"post",
		dataType:'json',
		data:{category:category},
		success:writeList
	});
}
//낮은가격순
function selectAllProductLowPrice(category){
	$.ajax({
		url:"/Jangdolbaeng2/product/selectAllProductLowPrice.action",
		type:"post",
		dataType:'json',
		data:{category:category},
		success:writeList
	});
}
//높은가격순
function selectAllProductHighPrice(category){
	$.ajax({
		url:"/Jangdolbaeng2/product/selectAllProductHighPrice.action",
		type:"post",
		dataType:'json',
		data:{category:category},
		success:writeList
	});
}

function writeList(json){
	
	//div height조절
	var size = json.list_size;
	var line = Math.ceil(size/4);
	
	$('#productdiv').css('height',270*line);
	
	var str ='';
	$.each(json.product_list,function(key,item){
		str += '<div class="product"><div id="div_product_img">';
		str += '<a href="/Jangdolbaeng2/product/goProduct_detail.action?product_seq='+item.PRODUCT_SEQ+'">';
		str += '<img src="data:image/jpeg;base64,'+item.PRODUCT_IMAGE1+'" width="220px" height="150px" class="product_img">';
		str += '</a></div><div id="div_product_content">';
		str += '<a href="/Jangdolbaeng2/product/goProduct_detail.action?product_seq='+item.PRODUCT_SEQ+'">';
		str += '<font face="nanumBB">'+item.PRODUCT_NAME+'</font></a><br>';
		str += '<a href="/Jangdolbaeng2/product/goProduct_detail.action?product_seq='+item.PRODUCT_SEQ+'">';
		str += '<font size="-1">'+item.NAME+'</font></a><br>';
		str += '<font size="-1">'+item.PRODUCT_PRICE+'원</font><br>';
		str += '<table>';
		str += '<tr><td><font size="-1">수량</font>';
		str += '<input type="text" id="quantitytext'+item.PRODUCT_SEQ+'" value="1" size="3" class="input_text" style="margin-left:3px"></td>';
		str += '<td width=""><img src="/Jangdolbaeng2/img/customer/upDown.jpg" alt="" title="" usemap="#updownLink'+item.PRODUCT_SEQ+'"></td>';
		str += '<td><map name="updownLink'+item.PRODUCT_SEQ+'"><area shape="rect" coords="4,4,13,12" href="javascript:quantityup('+item.PRODUCT_SEQ+')">';
    	str += '<area shape="rect" coords="4,14,13,22" href="javascript:quantitydown('+item.PRODUCT_SEQ+')"></map>';
		str += '</td>';
		str += '<td>';
		str += '<a href="javascript:goCartbt('+item.PRODUCT_SEQ+');">';
		str += '<button type="button" class="btn btn-default navbar-btn"';
		str += 'style="color:#383838; background-color:#fcfcfc; font-size:8pt; font-family:nanumBB;';
		str += 'padding-left:5px;padding-right: 5px; padding-top:0px; padding-bottom: 0px;">장바구니</button></a>';
		str += '</td></tr></table></div></div>';
	});	
	
	$('#productdiv').html(str); 
}

function goCartbt(product_seq){
	var customer_id = '${session.customer_id}';
	
	if(customer_id.length==0){
		if(confirm('로그인이 필요한 기능입니다. \n로그인 하시겠습니까?')){
			window.open("/Jangdolbaeng2/customer/goLoginForm.action", "loginWin", "width=800,height=380,top=300,left=500,scrollbars=no");
			return;
		}else{
			return;
		}
	}
	var quantity = $('#quantitytext'+product_seq).val();
	$.ajax({
		url:'/Jangdolbaeng2/product/insertCart.action',
		type:'post',
		dataType:'json',
		data:{
			quantity:quantity,
			product_seq:product_seq
		},
		success:function(json){
			if(confirm('장바구니에 넣었습니다.\n장바구니로 이동하시겠습니까?')){
				location.href="/Jangdolbaeng2/customer/goCart.action";
			}else{
				$('#quantitytext'+product_seq).val(1);
			}
		}
	});
}
function goCartbtmd(product_seq){
	var customer_id = '${session.customer_id}';
	
	if(customer_id.length==0){
		if(confirm('로그인이 필요한 기능입니다. \n로그인 하시겠습니까?')){
			window.open("/Jangdolbaeng2/customer/goLoginForm.action", "loginWin", "width=800,height=380,top=300,left=500,scrollbars=no");
			return;
		}else{
			return;
		}
	}
	var quantity = $('#quantitytextmd'+product_seq).val();
	$.ajax({
		url:'/Jangdolbaeng2/product/insertCart.action',
		type:'post',
		dataType:'json',
		data:{
			quantity:quantity,
			product_seq:product_seq
		},
		success:function(json){
			if(confirm('장바구니에 넣었습니다.\n장바구니로 이동하시겠습니까?')){
				location.href="../customer/goCart.action";
			}else{
				$('#quantitytextmd'+product_seq).val(1);
			}
		}
	});
}

//
function quantityup(product_seq){
	var quantity = $('#quantitytext'+product_seq).val();
	quantity = ++quantity;
	$('#quantitytext'+product_seq).val(quantity);
}
function quantitydown(product_seq){
	var quantity = $('#quantitytext'+product_seq).val();
	if(quantity > 1){
		quantity = --quantity;
		$('#quantitytext'+product_seq).val(quantity);
	}
}
function quantityupmd(product_seq){
	var quantity = $('#quantitytextmd'+product_seq).val();
	quantity = ++quantity;
	$('#quantitytextmd'+product_seq).val(quantity);
}
function quantitydownmd(product_seq){
	var quantity = $('#quantitytextmd'+product_seq).val();
	if(quantity > 1){
		quantity = --quantity;
		$('#quantitytextmd'+product_seq).val(quantity);
	}
}

</script>
<title>장돌뱅이 ~대한민국 전통시장을 응원합니다~</title>
</head>
<body>
<div id="head">
<%@ include file="/jsp/customer/main_header.jsp" %>
</div>
<div id="content">
	<!-- MD 추천 부분 -->
	<div id="MD_line"><font color="#444343">MD's choice / Hot items</font></div>
	<div id="MD">
		<!-- iterator 사용해서 이미지, 제품이름, 제품가격, 장바구니 버튼 넣어야함 -->
		<s:iterator value="md_list" status="stat" begin="0" end="3" step="1">
		<div class="product_md">
		<div id="md_img">
			<a href="/Jangdolbaeng2/product/goProduct_detail.action?product_seq=<s:property value="PRODUCT_SEQ"/>">
			<img src="data:image/jpeg;base64,<s:property value="PRODUCT_IMAGE1"/>" width="220px" height="150px"></a>
		</div>
		<div id="md_content">
			<a href="/Jangdolbaeng2/product/goProduct_detail.action?product_seq=<s:property value="PRODUCT_SEQ"/>">
			<span style="font-family:nanumBB;"><s:property value="PRODUCT_NAME"/></span></a><br>
			<a href="/Jangdolbaeng2/seller/blogMain.action?shop_seq=<s:property value="SHOP_SEQ"/>">
			<font size="-1"><s:property value="NAME"/></font></a><br>
			<font size="-1"><s:property value="PRODUCT_PRICE"/>원</font><br>
			<table>
			<tr><td>
			<font size="-1">수량</font>
			<input type="text" id="quantitytextmd<s:property value="PRODUCT_SEQ"/>" value="1" size="3" class="input_text"></td>
				<td align="left">
				<img src="/Jangdolbaeng2/img/customer/upDown.jpg" usemap="#updownLinkmd<s:property value="PRODUCT_SEQ"/>"></td>
				<td><map name="updownLinkmd<s:property value="PRODUCT_SEQ"/>">
            		<area shape="rect" coords="4,4,13,12" href="javascript:quantityupmd(<s:property value="PRODUCT_SEQ"/>)">
            		<area shape="rect" coords="4,14,13,22" href="javascript:quantitydownmd(<s:property value="PRODUCT_SEQ"/>)">
       			</map></td>
			</td>
			<td>
				<a href="javascript:goCartbtmd(<s:property value="PRODUCT_SEQ"/>)">
				<button type="button" class="btn btn-default navbar-btn" 
						style="color:#383838; background-color:#fcfcfc; font-size:8pt; font-family:nanumBB; 
						padding-left:5px;padding-right: 5px; padding-top:0px; padding-bottom: 0px;">장바구니</button></a>
			</td></tr>
			</table>
		</div>
		</div>
		</s:iterator>
		<!--  -->
			
	</div>
	<div id="MD_underline"></div>
	
	
	<div id="sortchoose">
	정렬<select id="select">
		<option id="category">신상품순</option>
		<option id="quantity">판매량순</option>
		<option id="lowPrice">낮은가격순</option>
		<option id="highPrice">높은가격순</option>
	</select>
	</div>
	
	
	<!-- 상품 리스트 부분 -->
	<div id="productdiv"></div>
	
</div>
<div id="footer">
	<%@ include file="/jsp/customer/main_footer.jsp" %>
</div>
</body>
</html>